import { fabric } from 'fabric'
import { Ref } from 'vue'

type Canvas = fabric.Canvas

export class FabricCanvas {
  domCanvasRef: Ref<HTMLCanvasElement | null>
  canvas?: Canvas
  constructor(domCanvasRef: Ref<HTMLCanvasElement | null>) {
    // 挂载后 domCanvasRef.value 的值才不为 null
    this.domCanvasRef = domCanvasRef
  }
  drawRect() {
    this.canvas = new fabric.Canvas(this.domCanvasRef.value, {
      width: 400,
      height: 400,
      backgroundColor: '#e3fdfd',
    })
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      width: 50,
      height: 50,
      stroke: 'black',
      fill: 'red',
    })
    this.canvas.add(rect)
  }
}
